<template>
  <div id="app">
     <!--  el-row 行   el-col 列
      默认情况将界面分成 24列 :span=8 -->

      <!-- 无间隔的例子呀 -->
      <!-- <el-row class="box">
        <el-col :span="8">
          <div class="bg-lightgreen"></div>
        </el-col>
        <el-col :span="8">
          <div class="bg-lightblue"></div>
        </el-col>
        <el-col :span="8">
          <div class="bg-lightpink"></div>
        </el-col>
      </el-row> -->

      <!-- 有间隔的例子。 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="bg-lightpink"></div>
        </el-col>
        <el-col :span="6">
          <div class="bg-lightblue"></div>
        </el-col>
        <el-col :span="6">
          <div class="bg-lightpink"></div>
        </el-col>
        <el-col :span="6">
          <div class="bg-lightblue"></div>
        </el-col>
      </el-row>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>


<style lang="less" scoped>
.box{
  width: 100vw;
  height: 100vh;
}
.bg-lightpink{
  // height: 20px;
  height: 100vh;
  width: 100%;
  background-color: lightpink;
}
.bg-lightblue{
  height: 20px;
  width: 100%;
  background-color: lightblue;
}
.bg-lightgreen{
  height: 20px;
  width: 100%;
  background-color: lightgreen;
}
</style>
